//请求数据并渲染
let data = {}
axios.get('../../php/getUserInfo.php').then(res => {
  data = res.data
  console.log(data.map)
  renderGender(data.male.male, data.female.female)
  renderAge(data.age)
  let len = +data.male.male + +data.female.female
  renderMap(data.map, len)
})


//渲染性别分布
const renderGender = (male, female) => {
  var chartDom = document.getElementById('gender')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}' + '{c}'
    },
    xAxis: {
      type: 'category',
      data: ['男', '女']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        barWidth: '50%',
        data: [{
          value: male || 0,
          // 设置单个柱子的样式
          itemStyle: {
            color: '#6495ED',
            shadowColor: '#6495ED',
            borderType: 'dashed'
          }
        }, {
          value: female || 0,
          // 设置单个柱子的样式
          itemStyle: {
            color: '#FFC0CB',
            shadowColor: '#FFC0CB',
            borderType: 'dashed'
          }
        }],
        type: 'bar'
      }
    ]
  }

  option && myChart.setOption(option)
}


//渲染年龄分布
const renderAge = (arr) => {
  var chartDom = document.getElementById('age')
  var myChart = echarts.init(chartDom)
  var option

  let data = []
  for (let i = 0;i < arr.length;i++) {
    let value = arr[i]["count(*)"]
    let name = ''
    switch (i) {
      case 0:
        name = '少儿'
        break
      case 1:
        name = '青少年'
        break
      case 2:
        name = '青年'
        break
      case 3:
        name = '青壮年'
        break
      case 4:
        name = '中年'
        break
      case 5:
        name = '老年'
        break
      default:
        break
    }
    let obj = {
      value,
      name
    }
    data.push(obj)
  }

  option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  }

  option && myChart.setOption(option)
}


//渲染地区分布
const renderMap = (map, len) => {
  // 初始化echarts实例
  var chartDom = document.getElementById('map')
  var myChart = echarts.init(chartDom)
  var passed_array = map
  //显示数组中的元素
  let pieList = []
  for (let i = 0;i < passed_array.length;i++) {
    var d = new Object()
    d.name = passed_array[i]['name']
    d.value = passed_array[i]['value']
    pieList.push(d)
  }
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        console.log(params)
        if (params.name) {
          return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value))
        }
      }
    },
    visualMap: { //视觉映射组件
      top: 'bottom',
      left: 'right',
      min: len / 100,
      max: len / 22,
      text: ['High', 'Low'],
      realtime: false, //拖拽时，是否实时更新
      calculable: true, //是否显示拖拽用的手柄
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [{
      name: '模拟数据',
      type: 'map',
      mapType: 'china',
      roam: false, //是否开启鼠标缩放和平移漫游
      itemStyle: { //地图区域的多边形 图形样式
        normal: { //是图形在默认状态下的样式
          label: {
            show: true, //是否显示标签
            textStyle: {
              color: "black"
            }
          }
        },
        zoom: 3.0, //地图缩放比例,默认为1
        layoutSize: '120%',
        emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
          label: {
            show: true
          }
        }
      },
      data: pieList
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}
renderMap()


